<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="球队名" prop="no">
          <el-input v-model="queryParams.name" placeholder="请输入教练名称" clearable style="width: 150px;"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
            v-hasPermi="['merchant:index']">添加球队</el-button>
        </el-form-item>
      </el-form>
  
      <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange"
        :default-sort="defaultSort" @sort-change="handleSortChange">
        <el-table-column label="ID" prop="id" width="55" />
        <el-table-column label="球队名称" align="center" prop="name" />
        <el-table-column label="logo" align="center" width="200">
          <template slot-scope="scope">
            <img class="list-qr" :src="imagePath + scope.row.logo">
          </template>
        </el-table-column>
        <el-table-column label="领队" align="center" prop="leader" />
        <el-table-column label="队长" align="center" prop="captain" />
        <!-- <el-table-column label="口号" align="center" prop="slogan" /> -->
        <!-- <el-table-column label="简介" align="center" prop="introduction" /> -->
        <el-table-column label="积分总量" align="center" prop="integralTotal" />
        <el-table-column label="当前积分量" align="center" prop="integralCurrent" />
        <el-table-column label="封面" align="center" width="200">
          <template slot-scope="scope">
            <img class="list-qr" :src="imagePath + scope.row.image">
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" sortable="custom"
          :sort-orders="['descending', 'ascending']" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['merchant:index']"
              @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" v-hasPermi="['merchant:index']"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
  
      <!-- 添加或修改对话框 -->
      <el-dialog :title="title" :visible.sync="open" class="common-dialog" width="800px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-position="top">
          <el-row>
            <el-col :span="24">
              <el-form-item label="球队名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入球队名称" maxlength="30" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-form-item label="logo" prop="photo">
                <el-upload :action="uploadAction" list-type="picture-card" :class="{ hide: hideUpload }"
                  :file-list="uploadFiles" :auto-upload="true" :show-file-list="false" :headers="uploadHeader"
                  :on-success="handleUploadSuccess">
                  <img v-if="form.logo" :src="imagePath + form.logo" class="list-img" />
                  <i v-if="!form.logo" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <!-- <p class="form-tips">（提示：点击图片修改）</p> -->
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-form-item label="封面" prop="photo">
                <el-upload :action="uploadAction" list-type="picture-card" :class="{ hide: hideUpload }"
                  :file-list="uploadFiles" :auto-upload="true" :show-file-list="false" :headers="uploadHeader"
                  :on-success="handleUploadSuccess">
                  <img v-if="form.image" :src="imagePath + form.image" class="list-img" />
                  <i v-if="!form.image" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <!-- <p class="form-tips">（提示：点击图片修改）</p> -->
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="领队" prop="organization">
                <el-select v-model="form.leaderId" placeholder="请选择队长">
                  <el-option v-for="item in mtInstitutionList" :key="item.id" :label="item.name" :value="item.id"  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="队长" prop="organization">
                <el-select v-model="form.captainId" placeholder="请选择队长">
                  <el-option v-for="item in mtInstitutionList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="口号" prop="name">
                <el-input v-model="form.slogan" placeholder="请输入球队名称" maxlength="30" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="介绍">
                <editor v-model="form.introduction" :min-height="300" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
    
  <script>
  import { getToken } from '@/utils/auth';
  import { getMtBasketballTeamList, saveSetting, update, deleteMtBasketballTeam, getMtBasketballTeamfor } from "@/api/mtbasketballteam";
  export default {
    name: "MtbasketballteamList",
    // components: { txMap },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 标题
        title: "",
        // 选中数组
        ids: [],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        // 是否显示弹出层
        open: false,
        // 搜索地点结果
        locationList: [],
        // 选中地址id
        locationValue: null,
        // 选中地址详情
        locationItem: {},
        // 默认排序
        defaultSort: { prop: 'createTime', order: 'descending' },
        // 商户类型
        typeOptions: [],
        //球员列表
        mtInstitutionList: [],
        // 表单参数
        form: {},
        // 上传地址
        uploadAction: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload',
        // 隐藏上传
        hideUpload: false,
        // 上传文件列表
        uploadFiles: [],
        uploadHeader: { 'Access-Token': getToken() },
        // 图片根目录
        imagePath: "",
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          name: '',
        },
        // 表单校验
        rules: {
  
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      // 查询日志
      getList() {
        this.loading = true;
        getMtBasketballTeamList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.list = response.data.mtBasketballTeam.content;
          this.total = response.data.mtBasketballTeam.totalElements;
          this.imagePath = response.data.imagePath;
          this.typeOptions = response.data.typeList;
          this.mtPlayerList = response.data.mtPlayerList;
          this.mtInstitutionList=response.data.mtPlayerList;
          this.loading = false;
        });
      },

      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },

      // 重置按钮操作
      resetQuery() {
        this.resetForm("queryForm");
        this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
        this.handleQuery();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.multiple = !selection.length;
      },
      // 排序触发事件
      handleSortChange(column, prop, order) {
        this.queryParams.orderByColumn = column.prop;
        this.queryParams.isAsc = column.order;
        this.getList();
      },
      // 新增按钮操作
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "新增球队";
      },
      // 表单重置
      reset() {
        this.form = {
          id: "",
          name: "",
          leaderId: null,
          captainId: null,
          introduction: "",
          slogan: "",
          logo: "",
          integralTotal:"",
          integralCurrent:"",
          image:"",
          createTime: ""
        };
        this.resetForm("form");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 提交按钮
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id) {
              update(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              saveSetting(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      // 修改按钮操作
      handleUpdate(row) {
        const app = this;
        app.reset();
        const id = row.id || this.ids;
        getMtBasketballTeamfor(id).then(response => {
          app.form = response.data.mtBasketballTeam;
          app.open = true;
          app.title = "编辑球队信息";
        });
      },
      // 删除按钮操作
      handleDelete(row) {
        const name = row.name || this.id;
        this.$modal.confirm('是否确认删除"' + name + '"的数据项？').then(function () {
          return deleteMtBasketballTeam(row.id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      handleUploadSuccess(file) {
        this.form.logo = file.data.fileName;
      }
    }
  };
  </script>
  <style scoped>
  .common-dialog>>>.el-upload--picture-card {
    width: 60px;
    height: 50px;
    line-height: 60px;
  }
  ::v-deep  .el-input--medium .el-input__inner{
    width: 364px;
  }
  </style>
    
    